<template>
	<view class="content" style="background-color: #F8F8F8;">
		
		<view class="itemContent" v-for="(item,index) in list" :key="index" @click="clkickCircleItem(item)">
			
			<!-- 广告 -->
			<template v-if="item._type == 'pic_ad' || item._type == 'topic_recommend_grid'">
				<view> 插播一条广告</view>
			</template>
			<template v-else>
				<circle-list-user :item="item.user" :time="item.create_time_str"></circle-list-user>
				
				<view class="u-line-5" style="width: 100%;background-color: #fff;padding: 10rpx 0;font-size: 30rpx;">{{item.content}}</view>
				
				<circle-list-album  v-if="item.pics_count != 0" :list="item.pics_arr" style="width: 100%; background-color:#fff;"></circle-list-album>
				
				<circle-list-circle-name :name="'贵港圈'" class="u-m-t-20"></circle-list-circle-name>
				
				<circle-list-comment  class="circle-list-comment" v-if="item.comment_list.length>0" :list="item.comment_list"></circle-list-comment>
				
				<circle-list-share-comment-like :item="item" style="width: 100%;height: 80rpx;background-color: #fff;padding: 0 40rpx"></circle-list-share-comment-like>
				
			</template>
			 
		</view>
	</view>
</template>

<script>
	
	import listJson from '@/config/api/circle.json'
	// import listJson from '@/config/api/circleTestJson.json'
	
	export default {
		components:{
			
		},
		
		onLoad() {
			
			const list = listJson.list
			this.list = list
			console.log(list)
		},
		
		data() {
			return {
				list:[]
			}
		},
		methods: {
			
			clkickCircleItem(item){
				console.log("11111")
				// console.log(item)
				this.$u.route('pages/circle/cricle-detail/cricle-detail',item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.itemContent{
		
		margin-bottom: 20rpx;
		background-color: #FFFFFF;
		padding: 10rpx 20rpx;
	}
	
	.circle-list-comment{
		margin: 20rpx 0rpx  0rpx 0rpx;
		// height: 200rpx;
	}
	
</style>
